<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动测试</title>
	<script type="text/javascript" src="http://188soft.test.zhuazi.com/src/vendors/jquery-1.10.2/jquery.js"></script>
     <style>


		 .column h1 {
			 margin:20px auto;
			 text-align: center;
			 font-size: 20px;
			 color: red;
		 }
		 .column  .block {
			 padding:50px 0;

		 }
		 .column  .border {
			 border-bottom: 2px dashed #87BF34;
		 }

	</style>
<body>
	<div class="column" style="width: 960px;margin:0 auto;">
		<h1>1,滑过显示与隐藏上下结构<br>样式：tab-hover-1</h1>
		<div class="block tabs-hover tab-hover-1" > 
			<ul class="tabs-nav-top clearfix hover-1-navtop"> 
				<li><span data-toggle="1" class="nav-item active">PC软件</span></li>
				<li><span  data-toggle="2" class="nav-item">安卓软件</span></li>
				<li><span  data-toggle="3" class="nav-item">苹果软件</span></li>
				<li><span  data-toggle="4" class="nav-item">TV软件</span></li>
				<li><span  data-toggle="5" class="nav-item">新闻资讯</span></li>
			</ul>
			<div class="tabs-contents ">
				<div class="tab-content active" id="item-1">PC软件</div>
				<div class="tab-content" id="item-2">安卓软件</div>
				<div class="tab-content" id="item-3">苹果软件</div>
				<div class="tab-content" id="item-4">TV软件</div>
				<div class="tab-content" id="item-5">新闻资讯</div>
			</div>
		</div>
		<p class="border"></p>


		<h1>2,滑过显示与隐藏左右结构<br>样式：tab-hover-2</h1>
		<div class="block tabs-hover tab-hover-2">
			<ul class="tabs-nav-top hover-2-navtop">
				<li><a href="http://188soft.test.zhuazi.com/new/" data-toggle="9" class="nav-item active" target="_blank">软件应用</a></li>
				<li><a href="http://188soft.test.zhuazi.com/new/pcsoft/" data-toggle="6" class="nav-item" target="_blank">电脑游戏</a></li>
				<li><a href="http://188soft.test.zhuazi.com/new/agame/" data-toggle="7" class="nav-item" target="_blank">手游推荐</a></li>
				<li><a href="http://188soft.test.zhuazi.com/zt/soft/" data-toggle="8" class="nav-item" target="_blank">合集推荐</a></li>
			</ul>
			<div class="tabs-contents hover-2-contents" >
				<div class="tab-content active" id="item-9">
					软件应用	
				</div>
				<div class="tab-content" id="item-6">
					电脑游戏
				</div>
				<div class="tab-content" id="item-7">
					手游推荐
				</div>
				<div class="tab-content" id="item-8">
					合集推荐
				</div>
			</div>
		</div>
		<p class="border"></p>
		

		<h1>3,滑过显示与隐藏上下结构<br>导航元素为左中右结构,样式：tab-hover-3</h1>
		<div class="block tabs-hover tab-hover-3">
			<div class="title ">
				<strong class="big-title">高频软件</strong>
				<ul class="tabs-nav-top hover-3-navtop">
					<li ><span data-toggle="win" class="nav-item active">Windows</span></li>
					<li><span data-toggle="an" class="nav-item">Android</span></li>
				</ul>
				<a href="#" class="more">更多>></a>
			</div>
			<div class="tabs-contents ">
				<div class="tab-content active" id="item-win">Windows</div>
				<div class="tab-content" id="item-an">Android</div>
			</div>
		</div>
		<p class="border"></p>


		<h1>4,滑过显示与隐藏上下结构<br>导航元素为左右结构,样式：tab-hover-4</h1>
		<div class="block tabs-hover tab-hover-4">
			<div class="title">
				<strong class="big-title">IOS游戏</strong> 
				<ul class="tabs-nav-top hover-4-navtop">
					<li><a href="http://188soft.test.zhuazi.com/apple/236/" data-toggle="pk" class="nav-item active" target="_blank">扑克牌游戏</a></li>
					<li><a href="http://188soft.test.zhuazi.com/apple/237/" data-toggle="yl" class="nav-item" target="_blank">娱乐场游戏</a></li>
					<li><a href="http://188soft.test.zhuazi.com/apple/238/" data-toggle="dz" class="nav-item" target="_blank">动作游戏</a></li>
					<li><a href="http://188soft.test.zhuazi.com/apple/239/" data-toggle="tx" class="nav-item" target="_blank">探险游戏</a></li>
				</ul>
			</div>
			<div class="tabs-contents">
				<div class="tab-content active" id="item-pk">扑克牌游戏</div>
				<div class="tab-content" id="item-yl">娱乐场游戏</div>
				<div class="tab-content" id="item-dz">动作游戏</div>
				<div class="tab-content" id="item-tx">探险游戏</div>
			</div>
		</div>
		<p class="border"></p>

		<h1>5,滑过显示与隐藏上下结构<br>样式：tab-hover-1+tab-hover-5</h1>
		<div class="block tabs-hover tab-hover-1 tab-hover-5">
			<ul class="tabs-nav-top clearfix hover-1-navtop"> 
				<li><span data-toggle="100" class="nav-item active">PC</span></li>
				<li><span  data-toggle="101" class="nav-item">安卓</span></li>
				<li><span  data-toggle="102" class="nav-item">IOS</span></li>
				<li><span  data-toggle="103" class="nav-item">资讯</span></li>
				<li><span  data-toggle="104" class="nav-item">专题</span></li>
			</ul>
			<div class="tabs-contents ">
				<div class="tab-content active" id="item-100">PC</div>
				<div class="tab-content" id="item-101">安卓</div>
				<div class="tab-content" id="item-102">IOS</div>
				<div class="tab-content" id="item-103">资讯</div>
				<div class="tab-content" id="item-104">专题</div>
			</div>
		</div>
		<p class="border"></p>

		
		<h1>6,点击显示与隐藏上下结构<br>样式：tab-click-1</h1>
		<div class="block tabs-click tab-click-1">
			<div class="block-title">
				<ul class="clickTabs-nav-top click-1-navtop">
					<li><span class="nav active" data-toggle="update">最新软件</span></li>
					<li><span class="nav" data-toggle="more">最多下载</span></li>
				</ul>
			</div>
			<div class="tabs-contents">
				<div class="tab-content active" id="item-update">最新软件</div>
				<div class="tab-content" id="item-more">最多下载</div>
			</div>
		</div>
		<p class="border"></p>

		
		<h1>7,点击显示与隐藏上下结构<br>样式：tab-click-2</h1>
		<div class="block tabs-click tab-click-2">
			<div class="clickTabs-nav-top click-2-navtop">
				<span class="nav active" data-toggle="105">同类软件</span>
				<span class="nav" data-toggle="106">下载排行</span>
			</div>
			<div class="tabs-contents click-2-contents">
				<div class="tab-content active" id="item-105">同类软件</div>
				<div class="tab-content" id="item-106">下载排行</div>
			</div>
		</div>
		<p class="border"></p>


		<h1>8,点击显示与隐藏上下结构<br>样式：tab-click-3</h1>
		<div class="block tabs-click tab-click-3">
			<ul class="clickTabs-nav-top click-3-navtop">
				<li><span class="nav active" data-toggle="hot">热门专题</span></li>
				<li><span class="nav" data-toggle="xin">最新更新</span></li>
			</ul>
			<div class="tabs-contents click-3-contents">
				<div class="tab-content active" id="item-hot">热门专题</div>
				<div class="tab-content" id="item-xin">最新更新</div>
			</div>
		</div>
		<p class="border"></p>


		
	</div>
	




</body>

</html> 
